<template>
  <!-- 课题一首页-行政地图 -->
  <el-container ref="bigModel" class="main-model">
    <el-header>
      <Header :active-title="1"/>
    </el-header>
    <el-main>
      <div class="home-model">
        <el-row style="height: 100%">
          <el-col :span="24" style="height: 100%">
            <div class="home-model-left">
              <!--风险警告-->
              <riskWarning/>
              <div style="height: 100%; width: 100%">
                <bkMap/>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="rightModel" :style="{ width: rightModelShow ? '20%' : '1px' }">
          <img v-if="rightModelShow" :src="require('@/assets/xd/new/Group 1142813242.png')" alt="" class="rightJ"
               style="" @click="hideRightModel">
          <img v-else :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="rightJ" style=""
               @click="showRightModel">
          <div v-show="rightModelShow" class="home-model-right">
            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                <div style="margin-top: 1px">终端用户APP安装量</div>
                <!-- 跳转终端页面 -->
                <el-button type="text" @click="todata(1)" class="more">
                  更多
                </el-button>
              </div>
              <div class="infoBody">
                <appInstalled/>
              </div>
            </div>

            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                <div style="margin-top: 1px"> 应用风险统计</div>
                <!-- 跳转apk页面 -->
                <el-button type="text" @click="todata(2)" class="more">
                  更多
                </el-button>
              </div>
              <div class="infoBody">
                <appAnalyze/>
              </div>
            </div>
            <div class="infoModel" :style="{ height: infoHeight + 'px' }">
              <div class="infoTitle flex-container">
                <div style="margin-top: 1px">应用检测统计</div>
                <!-- 跳转数据分析页面 -->
                <el-button type="text" @click="todata(3)" class="more">
                  更多
                </el-button>
              </div>
              <div class="infoBody">
                <taskStatistics/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header from "@/views/largeScreen/components/header/index.vue";
import terminalQuantity from "./components/terminalQuantity/index.vue";
import appInstalled from "./components/appInstalled/index.vue";
import taskStatistics from "./components/taskStatistics/index.vue";
import bkMap from "@/views/largeScreen/components/China/index.vue";
import appAnalyze from "@/views/largeScreen/components/appAnalyze/index.vue";
import riskWarning from "@/views/largeScreen/applicationScreen/components/riskWarning/index.vue";
export default {
  name: "MapView",
  components: {
    Header, 
    riskWarning,
     terminalQuantity,
      taskStatistics, 
      appAnalyze, 
      appInstalled, 
      bkMap
    },
  data() {
    return {
      rightModelShow: true,
      rightModelSpan: 7,
      leftModelSpan: 17,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },
      map: "",
      infoHeight: 300,
    };
  },
  mounted() {
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    let that = this;
  },
  created() {
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {

    toterminalManagement() {
      this.$router.push("/xsystem/terminalManagement");
    },
    showapk() {
      this.$router.push("/xsystem/apk");
    },
    showdata() {
      this.$router.push("/xsystem/data");
    },
    todata(type){
      if(type == 1){
        this.$router.push("/applicationService/terminal")
      }else if(type == 2){
        this.$router.push("/applicationService/apk")
      }else if(type == 3){
        this.$router.push("/applicationService/data")
      }
    },

    hideRightModel() {
      this.rightModelShow = false;
      this.rightModelSpan = 0;
      this.leftModelSpan = 24;
    },
    showRightModel() {
      this.rightModelShow = true;
      this.rightModelSpan = 7;
      this.leftModelSpan = 17;
    },

    onSubmit() {
    },
  },
};
</script>
<style lang="scss" scoped>
.el-header {
  padding: 0;
  z-index: 5;
}

.mapModel {
  width: 100%;
  height: 100%;
}

.home-model-right {

  border-radius: 5px;
  // padding: 5px;
}

.home-model-left {
  position: relative;
  height: 100%;
}

.home-model {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-model-search {
  z-index: 100000;
}

.home-model-right {
  .infoModel {
    position: relative;

    .infoTitle {
      font-size: vh(20);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-image: url(~@/assets/xd/new/title.png);
      background-repeat: no-repeat;
      background-size: 100% 80%;
      color: #fff;
    }

    .infoBody {
      height: 100%;
      padding-top: 40px;
      box-sizing: border-box;
    }
  }
}

.rightModel {
  position: absolute;
  right: 0;
  top: 10px;
  width: vw(380);
  height: vh(960);
}

.rightJ {
  left: -40px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.btn {
  position: absolute;
  right: 20%;
  z-index: 999;
  font-size: 20px;
}

.main-model {
  background-image: url(~@/assets/xd/new/homebg.png);
  background-color: #094294;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.more {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
</style>
